import React, { useState, useEffect, Component } from 'react';
import { Input, Modal, Select, Checkbox } from 'antd';
import type { GetProp } from 'antd';


// import classNames from 'classnames';

interface CustomSetterProps {
  // 当前值
  value: string;
  // 默认值
  defaultValue: string;
  // setter 唯一输出
  onChange: (val: string) => void;
}

interface CustomSetterState {
  options: Array<{ value: string; label: string }>;
  checkboxOptions: Array<{ value: string; label: string }>;
  open: boolean;
  selectedEntity: string;
}


export default class CustomSetter extends React.PureComponent<CustomSetterProps, CustomSetterState> {
  // 声明 Setter 的 title
  static displayName = 'CustomSetter';


  constructor(props: CustomSetterProps) {
    super(props);
    this.state = {
      options: [],
      checkboxOptions: [],
      open: false,
      selectedEntity: ''
    }
  }

  componentDidMount() {
    const { onChange, value, defaultValue } = this.props;
    if (value == undefined && defaultValue) {
      onChange(defaultValue);
    }
    const appId = localStorage.getItem('appId');



    fetch('http://localhost:8080/api/v1/entity/lc?appId=' + appId)
      .then(response => response.json())
      .then(data => {
        let ret = []
        for (const i of data.data) {
          ret.push({ value: i.name, label: i.displayName })
        }
        console.log(ret);
        this.setState({ options: ret });
      })
  }



  render() {
    //const [options, setOptions] = useState([]);
    const { options, open, checkboxOptions } = this.state;
    const { onChange, value } = this.props;
    const handleChange = (value: string) => {
      console.log(`selected ${value}`);
      this.setState({selectedEntity:value});
      fetch('http://localhost:8080/api/v1/field/lc?entityName=' + value)
        .then(response => response.json())
        .then(data => {
          let ret = []
          for (const i of data.data) {
            ret.push({ value: i.name, label: i.displayName })
          }
          console.log(ret);
          this.setState({ checkboxOptions: ret });
          
        })
    };

    const showModal = () => {
      this.setState({ open: true });
    };

    const handleOk = () => {
      this.setState({ open: false });
    };

    const handleCancel = () => {
      this.setState({ open: false });
    };

    const handleCheckbox: GetProp<typeof Checkbox.Group, 'onChange'> = (checkedValues) => {
      console.log('checked = ', checkedValues);
      let ret = [];
      
      ret = this.state.checkboxOptions.filter(item => checkedValues.includes(item.value));
      onChange(JSON.stringify({columns:ret,selectedEntity:this.state.selectedEntity}));
    };



    return (
      <>
        <Select
          defaultValue=""
          style={{ width: 120 }}
          onChange={(val: any) => {  handleChange(val); showModal() }}
          options={options}
        />
        <Modal title="字段选择" open={open} onOk={handleOk} onCancel={handleCancel}>
          <Checkbox.Group options={checkboxOptions} defaultValue={[]} onChange={handleCheckbox} />
        </Modal>
      </>

    );
  }
}



